<template>
  <div>
    <full-calendar class="test-fc" :events="fcEvents"
      first-day='1' locale="fr"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick">
        <template slot="fc-event-card" scope="p">
            <p><i class="fa"></i> {{ p.event.title }} </p>
        </template>
    </full-calendar>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form ref="event" v-model="event" >
        <div v-if="event.title!=''" style="color: red">倒计时：{{count}}</div>
        <el-form-item label="事件名称" prop="title">
          <el-input v-model="event.title"></el-input>
        </el-form-item>
        <el-form-item label="起始时间" prop="start">
          <el-date-picker
              v-model="event.start"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="end">
          <el-date-picker
              v-model="event.end"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="备忘录" prop="describe">
          <el-input type="textarea" :rows="3" v-model="event.describe"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false,initEvent()">取 消</el-button>
    <el-button type="danger" v-if="flag==1" @click="removeEvent">删 除</el-button>
    <el-button type="primary" @click="addEvent">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import {getDaysBetween,formatDate} from './myDay'

let demoEvents = [
    {
      title    : '篮球',
      start    : '2022-05-09',
      end      : '2022-05-09',
      describe: '无'
    },
    {
      title : '郊游',
      start : '2022-04-01',
      end : '2022-04-01',
      describe: '无'
      //cssClass : ['home', 'work'],
      // YOUR_DATA : {
      //   titile:1122
      // }
    },
    {
      title : '打游戏',
      start : '2022-04-01',
      end : '2022-04-01',
      describe: '无'
    },
    {
        title : 'Lunfel 2/27-2/28',
        start : '2022-04-01',
        end : '2017-02-28',
        describe: '无'
        //cssClass  : ['family', 'career'],

    },



  ];

export default {
	data () {

		return {
      name:'Sunny!',
      fcEvents : demoEvents,
      dialogVisible:false,
      event:{
        title : '',
        start : '',
        end : '',
        describe:''
            },
      flag:0,
      index:0,
      timer:null, //定时器
      count: '', //倒计时
      seconds: 0,

        }
	},
  methods : {
    'changeMonth' (start, end, current) {
      console.log('changeMonth', start.format(), end.format(), current.format())
    },
    'eventClick' (event, jsEvent, pos) {
      var myDate = new Date();
      var currentDate=formatDate(myDate.toLocaleDateString().split('/').join('-').padStart(2,'0'))
      var currentSeconds=myDate.getHours()*3600+myDate.getMinutes()*60+myDate.getSeconds()
      console.log(currentSeconds+"秒")
      var day=getDaysBetween(currentDate,event.end)
      console.log(event.end+"||"+currentDate+"||"+day+"天")
      this.seconds=day*86400-currentSeconds
      this.Time() //调用定时器
      console.log('eventClick', event, jsEvent, pos)
      this.dialogVisible=true
      this.event.title=event.title
      this.event.start=event.start
      this.event.end=event.end
      this.event.describe=event.describe


      //查询是否存在事件
      for (var i=0;i<demoEvents.length;i++){
        console.log("我在循环")
        if(demoEvents[i].title==this.event.title&&demoEvents[i].start==this.event.start){
          this.flag=1;
          this.index=i;
          break;
        }
      }
      console.log("下标"+this.index)
      console.log("flag:"+this.flag)

    },
    // 天 时 分 秒 格式化函数
    countDown() {
      let d = parseInt(this.seconds / (24 * 60 * 60))
      d = d < 10 ? "0" + d : d
      let h = parseInt(this.seconds / (60 * 60) % 24);
      h = h < 10 ? "0" + h : h
      let m = parseInt(this.seconds / 60 % 60);
      m = m < 10 ? "0" + m : m
      let s = parseInt(this.seconds % 60);
      s = s < 10 ? "0" + s : s
      this.count = d + '天' + h + '时' + m + '分' + s + '秒'
    },
    //定时器没过1秒参数减1
    Time() {
      this.timer=setInterval(() => {
        this.seconds -= 1
        this.countDown()
      }, 1000)
    },
    'dayClick' (day, jsEvent) {
      console.log('dayClick', day, jsEvent)
      let date = new Date(day._d)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      const time =  y + '-' + m + '-' + d;
      this.event.start=time
      console.log(time)

      this.dialogVisible=true
    },
    'moreClick' (day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.initEvent()
            this.flag=0
            done()

          })
          .catch(_ => {});
    },
    addEvent(){

      //如果事件不存在，新增实践
      if (this.flag==0){
        if (this.event.title!=''&&this.event.start!=''&&this.event.end!=''){
          //定义事件对象
          var event1=(JSON.parse(JSON.stringify(this.event)))
          demoEvents.push(event1)
          this.$message.success("添加成功")
          console.log(event1)
          this.initEvent()
          this.dialogVisible = false
        }else {
          this.$message.error("请完善信息")
        }
      }else {
        //如果事件存在，就修改事件
        if (this.event.title!=''&&this.event.start!=''&&this.event.end!=''){
          //定义事件对象

          var event1=(JSON.parse(JSON.stringify(this.event)))
          demoEvents[this.index].title=event1.title;
          demoEvents[this.index].start=event1.start;
          demoEvents[this.index].end=event1.end;
          this.$message.success("修改成功")
          console.log(demoEvents[this.index])
          this.initEvent()
          this.flag=0  //重置flag标签
          this.dialogVisible = false
        }else {
          this.$message.error("请完善信息")
        }
      }
    },
    removeEvent(){
        demoEvents.splice(this.index,1)
        this.dialogVisible = false
        this.$message.success("删除成功")
        this.initEvent()
        this.flag=0

    },
    initEvent(){
      this.event.title=''
      this.event.start=''
      this.event.end=''
      clearInterval(this.timer);
      this.timer = null;
    }
  },

  components : {
    'full-calendar' : require('src/fullCalendar')
  }
}
</script>
<style lang='scss'>
  .app{
    color:green;
  }
</style>
